<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2022/12/7
  Time: 22:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户主页</title>
    <script src="<%=request.getContextPath()%>/js/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/main_user.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-row type="flex" justify="center">
        <el-col :span="20" style="background-color:#545c64">
            <el-container>
                <el-header>
                    <el-row type="flex" justify="end">
                        <el-col :span="7">
                            <el-menu class="el-header-menu"
                                     mode="horizontal"
                                     @select="handleSelect"
                                     background-color="#545c64"
                                     text-color="#fff"
                                     active-text-color="#409EFF">
                                <el-menu-item index="1" @click="goMainIndex">首页</el-menu-item>
                                <el-menu-item index="2" @click="drawer = true">帮助</el-menu-item>
                                <el-drawer
                                        title="帮助面板"
                                        :visible.sync="drawer"
                                        :with-header="true">
                                    <el-collapse v-model="activeNames" accordion>
                                        <el-collapse-item name="1" style="margin-left: 20px">
                                            <template slot="title">
                                                提示<i class="header-icon el-icon-info"></i>
                                            </template>
                                            <div style="margin-bottom: 15px" v-for="text in userHelps">- {{text}}</div>
                                        </el-collapse-item>
                                    </el-collapse>
                                </el-drawer>
                                <el-menu-item index="3" @click="ProcessInfoCenterDrawer = true">处理中心</el-menu-item>
                                <el-drawer
                                        title="处理中心面板"
                                        :visible.sync="ProcessInfoCenterDrawer"
                                        :with-header="true"
                                        direction="ltr"
                                        custom-class="demo-drawer"
                                        ref="drawer"
                                        :before-close="handleClose2">
                                    <div class="demo-drawer__content">
                                        <%--该功能发送消息失败--%>
                                        <el-form :model="form_processInfoCenter">
                                            <el-row>
                                                <el-col :span="20">
                                                    <el-form-item label="反馈内容" :label-width="formLabelWidth">
                                                        <el-input autocomplete="off" type="textarea"
                                                                  v-model="form_processInfoCenter.MessageContext"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </div>
                                    <div class="demo-drawer__footer">
                                        <el-row>
                                            <el-col :offset="1" :span="12">
                                                <el-button type="primary" @click="ProcessInfoCenter" size="small">确定</el-button>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="demo-drawer__content">
                                        <el-form :model="form_processInfoCenter">
                                            <el-row>
                                                <el-col :span="20">
                                                   <p>回复内容</p>
                                                    <span>{{replyMessage}}</span>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </div>
                                </el-drawer>
                                <el-submenu index="4">
                                    <template slot="title">
                                        <el-avatar :size="50">{{customerInfo.user_detailed.user_nickname}}</el-avatar>
                                    </template>
                                    <el-menu-item index="4-1" @click="goUserInfo">个人主页</el-menu-item>
                                    <el-menu-item index="4-2" @click="goUpdatePassword">修改密码</el-menu-item>
                                    <el-menu-item index="4-3" @click="goQuit">退出</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-row>
                        <el-col :span="4">
                            <el-row>
                                <el-col :span="12">
                                    <span class="left-top-title">{{customerInfo.user_detailed.user_nickname}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <el-link class="el-icon-user" @click="goUserInfo" :underline="false">个人主页</el-link>
                                </el-col>
                                <el-col :span="2">
                                    <el-link :underline="false" class="el-icon-setting"></el-link>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="24">
                                    <el-menu>
                                        <el-menu-item index="1" @click="goMyTopicDatabase">
                                            <i class="el-icon-s-management"></i>
                                            <span slot="title">我的题库</span>
                                        </el-menu-item>
                                        <el-menu-item index="2" @click="goMyErrorTopic">
                                            <i class="el-icon-s-order"></i>
                                            <span slot="title">错题本</span>
                                        </el-menu-item>
                                    </el-menu>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="6">
                                    正确率
                                </el-col>
                                <el-col :span="17">
                                    <el-progress type="circle" :percentage="percentage.percentageTrue"
                                                 :color="colors"></el-progress>
                                </el-col>
                            </el-row>
                            <el-row class="el-progress-MainLeft-topic">
                                <el-col :span="6">
                                    刷题量
                                </el-col>
                                <el-col :span="17">
                                    <el-progress type="circle" :color="colors"
                                                 :percentage="percentage.percentage"></el-progress>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="20">
                            <iframe :src="main" frameborder="0"></iframe>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                percentage: [],
                customerInfo: [],
                colors: [
                    {color: '#f56c6c', percentage: 20},
                    {color: '#e6a23c', percentage: 40},
                    {color: '#5cb87a', percentage: 60},
                    {color: '#1989fa', percentage: 80},
                    {color: '#6f7ad3', percentage: 100}
                ],
                formLabelWidth: '80px',
                main: '/online_website/user/main_index.jsp',
                drawer: false,
                ProcessInfoCenterDrawer: false,
                form_processInfoCenter: {
                    MessageContext: '',
                },
                userHelps: [],
                activeNames: ['1'],
                replyMessage:'好的，收到了'
            }
        },
        created() {
            //获取账号信息
            this.getUserAccountInfo();
            //获取答题数据
            this.getPercentage();
            //获取帮助提示
            this.getHelpLog();
        },
        methods: {
            getUserAccountInfo() {
                //获取账号session
                var userAccount = '<%=session.getAttribute("userAccount")%>';
                //发送数据
                axios({
                    url: "/online_website/userMain/userInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        userAccount: userAccount,
                    }
                }).then((res) => {
                    this.customerInfo = res.data;
                });
            },
            getPercentage() {
                //获取账号session
                var userAccount = '<%=session.getAttribute("userAccount")%>';
                //发送数据
                axios({
                    url: "/online_website/common/GetTopicPercentage",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        userAccount: userAccount,
                    }
                }).then((res) => {
                    this.percentage = res.data;
                });
            },
            goUserInfo() {
                this.main = '/online_website/user/info/userInfo.jsp';
            },
            goMainIndex() {
                this.main = '/online_website/user/main_index.jsp';
            },
            goMyTopicDatabase() {
                this.main = '/online_website/user/item/myTopicDatabase.jsp';
            },
            goMyErrorTopic() {
                this.main = '/online_website/user/item/myErrorTopic.jsp';
            },
            goUpdatePassword() {
                this.main = '/online_website/user/info/userUpdatePwd.jsp';
            },
            goQuit() {
                var httpRequest = new XMLHttpRequest();
                httpRequest.open('GET', '/online_website/common/quit', true);
                httpRequest.send();
                window.location.href = '/online_website';
            },
            getHelpLog() {
                //获取帮助提示
                axios({
                    url: "/online_website/common/log/HelpUserLog",
                    method: "get",
                    contentType: "application/json",
                }).then((res) => {
                    this.userHelps = res.data;
                });
            },
            // 获取回复消息
            getReplyMessage(){

            },
            ProcessInfoCenter() {
                let userAccount = '<%=session.getAttribute("userAccount")%>';
                axios({
                    url: "/online_website/common/log/SendProcessInfoMessage",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        userAccount: userAccount,
                        messageContext: this.form_processInfoCenter.MessageContext,
                    }
                }).then((res) => {
                    if (res.data===1){
                        this.$notify({
                            title: '成功',
                            message: '发送成功',
                            type: 'success'
                        });
                    }else {
                        this.$notify.error({
                            title: '错误',
                            message: '发送失败'
                        });
                    }
                })
            },
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();})
                    .catch(_ => {});
            }
        },
    })
</script>
</html>
